<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <meta name="renderer" content="webkit">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta http-equiv="pragma" content="no-cache"/>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"/>

    <meta content="telephone=no,email=no" name="format-detection"/>
    <!--[if lte IE 8]>
    <script src="js/excanvas.js"></script>
    <script>
        Chart.defaults.global.animation = false;
        //这里主要是为<=IE8做降级处理，因为动画在IE8效果很差
    </script>
    <![endif]-->
    <title>Bar Chart</title>
    <script src="js/Chart.js"></script>
    <script src="js/jquery-1.8.3.js"></script>
</head>
<body>

<input class="day" type="button" value="1">
<input type="button" value="7">
<input type="button" value="30">
<input type="button" value="365">

<canvas id="myChart" width="1200" height="500"></canvas>

<script>
    $(document).ready(function () {
        var name_value = $(".day").val();
        test(name_value);

        function test(n_v) {
            var ajax = $.ajax({
                url: "php/arr.php",
                type: "post",
                data: {"name_value": n_v},
                dataType: "json",
                aysnc: "false"
            });

            ajax.done(function(result){
                var location = new Array();
                var app = new Array();
                var web = new Array();

                for (var i in result) {
                    var tr_v = result[i];
                    location.push(tr_v[1]);
                    web.push(tr_v[2]);
                    app.push(tr_v[3]);
                }

                var barChartData = {
                    labels: location,
                    datasets: [
                        {
                            fillColor: "rgba(220,220,220,0.5)",
                            strokeColor: "rgba(220,220,220,0.8)",
                            highlightFill: "rgba(220,220,220,0.75)",
                            highlightStroke: "rgba(220,220,220,1)",
                            data: web
                        },
                        {
                            fillColor: "rgba(151,187,205,0.5)",
                            strokeColor: "rgba(151,187,205,0.8)",
                            highlightFill: "rgba(151,187,205,0.75)",
                            highlightStroke: "rgba(151,187,205,1)",
                            data: app
                        }
                    ]
                }

                var ctx = document.getElementById("myChart").getContext("2d");
                var myNewChart = new Chart(ctx).Bar(barChartData);

            });
        }
    });
</script>
</body>
</html>
